<template>
  <div class="invest-compute-box">
    <div class="invest-compute">
      <div class="cname">{{ $t('page4.doc129') }}</div>
      <div class="compute-box">
        <div class="compute">
          <input type="number" v-number-only
                 v-model="computeAmount"
                 :placeholder="$t('page4.doc126')">
          <div class="bi">
            <img src="@/assets/images/ico_bi1.png" alt="">USDT
          </div>
        </div>
      </div>
    </div>

    <div class="invest-compute">
      <div class="cname">{{ $t('page4.doc129') }}</div>
      <div class="compute-box">
        <div class="compute" @click="showPop = true">
          <div class="text" :class="{active:itemInfo.text}">{{ itemInfo.text || $t('new.doc25') }}</div>
          <van-icon name="arrow" class="arrow"/>
        </div>
      </div>
      <p class="p1">{{ $t('page4.doc130') }}<span>{{ income }} USDT</span></p>
    </div>

    <van-popup
        v-model="showPop"
        :lock-scroll="false"
        get-container=".page"
        round
        position="bottom"
    >
      <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPop = false"
          :swipe-duration="400"
          :confirm-button-text="$t('page.doc83')"
          :cancel-button-text="$t('page4.doc63')"
      />
    </van-popup>

  </div>
</template>

<script>
import common from "@/utils/common";

export default {
  data() {
    return {
      computeAmount: null,
      showPop: false,
      columns: [],
      itemInfo: {},
      info: {},
      balance: 0,
      text: ''
    }
  },
  computed: {
    income() {
      let {itemInfo, computeAmount} = this
      if (!computeAmount || !itemInfo.rate) return 0
      let oneDayProfit = common.accMul(itemInfo.rate, itemInfo.days)
      return common.accMul(computeAmount, oneDayProfit)
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getDetail(productId) {
      const url = this.URL.financial.proDetail
      let res = await this.$post(url, {productId})
      if (res.code == 0) {

        this.info = res.data;
        this.balance = res.data.balance
        this.txt = this.$t('page3.doc49') + res.data.min
      } else {
        this.$toast(res.message);
      }
    },
    onConfirm(item) {
      this.itemInfo = item
      this.showPop = false;
      this.getDetail(item.productId)
    },
    async getList() {
      let res = await this.$post(this.URL.financial.prolist)
      if (res.code != 0) return this.$toast(res.message);
      this.columns = res.data.map(item => {
        // let rate = common.accMul(item.rate,100)
        item.text = item.name;
        return item
      })
    },
  },
}
</script>

<style lang="less" scoped>
.invest-compute {
  //padding-bottom: .48rem;
  margin-bottom: 0.2rem;

  .cname {
    color: #FFF;
    font-size: .32rem;
    font-weight: 500;
    margin-bottom: .2rem;
    line-height: .5rem;
  }

  .p1 {
    margin-top: .2rem;
    font-size: .28rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #a1a1a1;

    span {
      color: #FFDD9A;
    }
  }

  .compute-box {
    padding: 0 .32rem;
    border-radius: .2rem;
    background: #181c21;
    height: 0.96rem;
    line-height: 0.96rem;

    .compute {
      //padding: .32rem 0;
      border-bottom: .02rem solid #272A3A;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &:nth-last-child(1) {
        border-bottom: none;
      }

      input {
        flex: 1;
        background: transparent;
        outline: none;
        border: none;

        &::placeholder {
          color: #7d7f81;
        }
      }

      .text {
        flex: 1;
        color: #7d7f81;

        &.active {
          color: #fff;
        }
      }

      .bi {
        margin-left: .1rem;
        border-radius: .08rem;
        font-size: .28rem;
        color: #fff;
        align-items: center;
        display: flex;

        img {
          height: .39rem;
          margin-right: .12rem;
        }
      }

      .arrow {
        font-size: .28rem;
        color: #fff;
      }
    }
  }
}
</style>
